<template>
  <view class="healthyDiet_container app_container_page">
    <view class="tab">
      <view class="tab1" :class="code == 0 ? 'active' : ''" @click="activeChange(0)">文章</view>
      <view :class="code == 1 ? 'active' : ''" @click="activeChange(1)">视频</view>
    </view>
    <pullRefreshView v-show="code === 0" class="pullRefreshArtView" ref="pullRefreshArtView" :fetchFn="fetchArtList" v-slot:default="{ list }">
      <view style="display: none">{{ list }}</view>
      <appHealthyCard v-for="diet in list" :key="diet.id" :diet="diet" @HEALTHY_CARD_CLICK="toArticalDetail" class="healthyCard" />
    </pullRefreshView>
    <pullRefreshView v-show="code === 1" class="pullRefreshVideoView" ref="pullRefreshVideoView" :fetchFn="fetchHealthDietVideoList">
      <template v-slot:default="{ list }">
        <appVideoListCard v-for="video in list" :key="video.id" :video="video" @VIDEOLIST_CARD_CLICK="toVideoDetail" class="healthyCard" />
      </template>
    </pullRefreshView>
  </view>
</template>

<script>
import { getDietList, getHealthDietVideoList } from '@/api/home'
import pullRefreshView from '@/components/app/pull-refresh-view.vue'
import appHealthyCard from '@/components/app/app_healthy_card.vue'
import appVideoListCard from '@/components/app/app_videoList_card'
export default {
  components: {
    pullRefreshView,
    appHealthyCard,
    appVideoListCard
  },
  data() {
    return {
      code: 0
    }
  },
  methods: {
    activeChange(val) {
      this.code = val
    },
    fetchArtList(params) {
      return getDietList({
        ...params,
        categoryCode: 0
      })
    },
    fetchHealthDietVideoList(params) {
      return getHealthDietVideoList({
        ...params
      })
    },
    toArticalDetail(val) {
      uni.navigateTo({
        url: '/pages/healthyDiet/ArticalDetail?id=' + val.id
      })
    },
    toVideoDetail(val) {
      uni.navigateTo({
        url: '/pages/videoDetail/index?id=' + val.id
      })
    }
  },
  onShow() {
    uni.removeStorageSync('ishealthyDetail')
  },
  onPullDownRefresh() {
    this.$refs[this.code === 0 ? 'pullRefreshArtView' : 'pullRefreshVideoView'].fetchList(true).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    this.$refs[this.code === 0 ? 'pullRefreshArtView' : 'pullRefreshVideoView'].fetchList()
  }
}
</script>

<style lang="scss">
.healthyDiet_container {
  padding: 100rpx 30rpx 0 30rpx;
  .tab {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .pullRefreshArtView {
    &:nth-last-child(1) {
      margin: 0;
    }
  }
  app-healthy-card ~ app-healthy-card {
    margin-top: 30rpx;
  }
  app-video-list-card ~ app-video-list-card {
    margin-top: 30rpx;
  }
}
</style>
